<template>
  <div class="upgrade-item-wrapper" :style="{borderColor: borderColor}">
    <h4 class="upgrade-title">
      {{title}}
    </h4>
    <div class="upgrade-item">
      <h6 v-for="item in items" :key="item">{{item}}</h6>
    </div>
    <img :src="url" alt="">
  </div>
</template>

<script>
  export default {
    name: "UpgradeItem",
    props: {
      title: String,
      items: Array,
      borderColor: String,
      url: String
    }
  };
</script>

<style lang="less">
  .upgrade-item-wrapper {
    width: 140px;
    height: 140px;
    border: 1px solid;
    border-radius: 15px;
    padding: 10px;
    text-align: left;
    position: relative;
    .upgrade-title {
      position: relative;
      padding-bottom: 10px;
      display: inline-block;
      &::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #FE6B17;
      }
    }

    .upgrade-item {
      position: absolute;
      bottom: 10px;
      left: 10px;
      h6:not(:last-child) {
        margin-bottom: 5px;
      }
    }

    img {
      width: 20px;
      height: 20px;
      position: absolute;
      top: 10px;
      right: 10px;
    }
  }
</style>
